<template>
  <div>
    <!-- 播放器 -->
    <div class="player" v-show="showplayer">
      <div class="button" @click="showplayerFun(false)">
        <span class="iconfont icon-arrow-down-bold"></span>
      </div>
      <div class="title">
        <h2>{{ musicData.name }}</h2>
        <h3>
          <span
            v-for="(item, index) in musicData.ar"
            :key="index"
            v-show="index < 3"
            >{{ item.name }}</span
          >
        </h3>
      </div>
      <!-- 唱片 -->
      <div class="content clearfix" @click="toggleplyric = !toggleplyric">
        <div v-show="toggleplyric == true" :class="['img', 'play', { 'pause': iconplay }]">
          <img :src="musicData.coverImgUrl" alt="" />
        </div>
        <!-- 歌词 -->
        <div v-show="toggleplyric != true" class="lyrics">
          <ul :style="{'top':lyricTop}">
            <li v-for="(item,index) in lyric" :key="index" :class="{'con':currentRow === index}">{{item.text}}</li>
            <li v-if="lyric.length==0">暂无歌词~</li>
          </ul>
        </div>
      </div>

      <div class="range">
        <div class="bar">
          <span class="timeLeft">{{ timeleft | playertime }}</span>
          <van-slider
            v-model="value"
            @change="sliderchange"
            bar-height="5px"
            active-color="#D4483D"
          >
            <template #button>
              <div class="custom-button"></div>
            </template>
          </van-slider>
          <span class="timeRight">{{ timeright | playertime }}</span>
        </div>
      </div>

      <div class="buttons">
        <div v-if="playerType == 1" class="iconfont icon-liebiaobofang1" @click="changeMode"></div>
        <div v-else class="iconfont icon-suijibofang413" @click.stop="changeMode"></div>
        <div class="iconfont icon-shangyiqu-wangyiicon" @click="startup"></div>
        <div class="iconbutton" @click.stop="toggleplay">
          <span v-if="iconplay" class="iconfont icon-bofang413"></span>
          <span v-else class="iconfont icon-zantingtingzhi413"></span>
        </div>
        <div class="iconfont icon-shangyiqu" @click="lowerFun"></div>
        <div v-if="aixin" class="iconfont icon-xinaixin1" @click="getLikeFun(musicData.id)"></div>
        <div v-else class="iconfont icon-xinaixin-fuben1" @click="getLikeFun(musicData.id)"></div>
      </div>
    </div>

    <!-- 迷你播放器 -->
    <div class="mini-player" v-if="musicData.coverImgUrl">
      <div class="img" @click="showplayerFun(true)">
        <img
          :class="['play', iconplay ? 'pause' : '']"
          :src="musicData.coverImgUrl"
          alt=""
        />
      </div>
      <div class="text">
        <h2>{{ musicData.name }}</h2>
        <h3>
          <span
            v-for="(item, index) in musicData.ar"
            :key="index"
            v-show="index < 3"
            >{{ item.name }}</span
          >
        </h3>
      </div>
      <div class="control">
        <div class="left" @click="toggleplay">
          <span v-if="iconplay" class="iconfont icon-fang"></span>
          <span v-else class="iconfont icon-ting"></span>
        </div>
        <div class="right">
          <span class="iconfont icon-gengduo413" @click="showPopup"></span>
        </div>
      </div>
    </div>

    <div class="showlist">
      <!-- <van-cell is-link  >展示弹出层</van-cell>  -->
      <van-popup v-model="show" position="bottom" :style="{background:'#F2F3F4'}" >
        <ul>
          <li>
            <span v-if="playerType == 1" class="iconfont icon-liebiaobofang1" @click="changeMode"></span>
            <span v-else class="iconfont icon-suijibofang413" @click.stop="changeMode"></span>
            <span>
              <span  v-if="playerType == 1">顺序</span>
              <span v-else>随机</span>
              播放({{tracksLength}})
            </span>
            <span style="float: right;" class="iconfont icon-xiezai413" @click="delAdd(tracksLength)"></span>
          </li>
          <li v-for="(item,index) in musicData.tracks" :key="index" v-show="index != hiddenIndex" @click="playmusic(item.id,item.name,item.ar)">
            <span class="name">{{item.name}}</span>
            <span style="float:right" @click.stop="showHidden(index)">x</span>
          </li>
          <li></li>
          <li class="btn">
            <button @click="showClose">关闭</button>
          </li>
        </ul>
      </van-popup>
    </div>

    <audio
      ref="audio"
      hidden
      controls
      :src="musicData.url"
      @canplay="canplayFun"
      @ended="endedFun"
    ></audio>
  </div>
</template>

<script>
import { getSongUrl, getSongLyric, getLike} from "../../api/base";
export default {
  data() {
    return {
      iconplay: true,
      // musicData: {},
      showplayer: false,
      value: 0,
      timeright: 0,
      timeleft: 0,
      clearset: null,
      playerType: 1, // 1 列表播放 2 随机播放
      lyric:[], // 歌词对象
      currentRow:0,
      lyricTop: "300px",
      toggleplyric: true,
      show: false,
      hiddenIndex:null,
      tracksLength:0,
      aixin: true, // 收藏歌曲
    };
  },
  watch: {
    musicData: {
      handler: function() {
        getSongUrl({ id: this.musicData.id }).then((data) => {
          this.iconplay = true;
          this.$set(this.musicData, "url", data.data[0].url);
          this.tracksLength = this.musicData.tracks.length
        });
        // 调用歌词
        this.getSongLyricFun()
      },
      deep: true,
    },
    timeleft:function(){
      for(let i = 0; i<this.lyric.length; i++){
        if(parseInt(this.timeleft) == this.lyric[i].time){
          this.currentRow = i; // 文字选中切换
          this.lyricTop = 300 - i * 50 + "px";
          break
        }
      }
    }
  },
  methods: {
    getLikeFun(id){
      this.aixin = !this.aixin
      getLike({"op":"add","pid":"6712539044","tracks":id}).then(data=>{
        console.log(data)
      })
    },

    delAdd(length){
      this.musicData.tracks.splice(0,length)
    },
    showPopup() {
      this.show = true;
    },
    showClose(){
      this.show = false;
    },
    showHidden(index){
      this.musicData.tracks.splice(index,1)
    },
    playmusic(id,name,ar){
      let playMusicData = {
        coverImgUrl:this.musicData.coverImgUrl,
        id,
        name,
        ar,
        tracks:this.musicData.tracks,
      }
      this.show = false;
      // 数据存储
      this.$store.commit("musicDatafun",playMusicData )
    },
    toggleplay() {
      if (this.iconplay) {
        this.$refs.audio.play(); // 播放
        clearInterval(this.clearset); // 清除定时器
        // 设置定时器
        this.clearset = setInterval(() => {
          let currentTime = this.$refs.audio.currentTime;
          let duration = this.$refs.audio.duration;
          this.timeleft = currentTime;
          // 计算滑块位置
          this.value = (currentTime / duration) * 100;
          if (this.value == 100) {
            clearInterval(this.clearset);
            this.$refs.audio.pause(); // 暂停
          }
        }, 999);
      } else {
        this.$refs.audio.pause(); // 暂停
        clearInterval(this.clearset);
      }
      // 按钮切换
      this.iconplay = !this.iconplay;
    },
    showplayerFun(bol) {
      this.showplayer = bol;
    },
    // 进度条
    sliderchange() {
      let duration = (this.$refs.audio.duration * this.value) / 100;
      this.timeleft = duration; // 百分比
      this.$refs.audio.currentTime = duration; // 修改时间
    },
    // 上一曲
    startup() {
      let { id, tracks } = this.musicData;
      // 返回下标
      let index = tracks.findIndex((item) => {
        return item.id == id;
      });
      index = index - 1 < 0 ? tracks.length - 1 : index - 1;
      this.$set(this.musicData, "id", tracks[index].id);
      this.$set(this.musicData, "name", tracks[index].name);
      this.$set(this.musicData, "ar", tracks[index].ar);
    },
    // 下一曲
    lowerFun() {
      let { id, tracks } = this.musicData;
      // 返回下标
      let index = tracks.findIndex((item) => {
        return item.id == id;
      });
      index = index + 1 > tracks.length - 1 ? 0 : index + 1;
      this.$set(this.musicData, "id", tracks[index].id);
      this.$set(this.musicData, "name", tracks[index].name);
      this.$set(this.musicData, "ar", tracks[index].ar);
    },
    // 音乐加载完后调用
    canplayFun() {
      this.timeright = this.$refs.audio.duration;
      // this.timeleft = 0;
      this.iconplay = true; // 播放
      this.toggleplay();
    },
    // 获取歌词
    getSongLyricFun() {
      this.lyricTop = "300px";
      this.currentRow = 0;
      getSongLyric({ id: this.musicData.id }).then((data) => {
        this.formatLyric(data.lrc.lyric);
      });
    },
    // 处理歌词结构
    formatLyric(text) {
      this.lyric = [];
      let arr = text.split("\n"); // 把原歌词字符串转数组
      let row = arr.length; // 获取数组长度
      for (let i = 0; i < row; i++) {
        let temp_row = arr[i]; // 获取数据"[00:00.000] 作词 : G.E.M.邓紫棋"
        let temp_arr = temp_row.split("]"); // 分成两个数组
        // [00:00.000      作词 : G.E.M.邓紫棋
        let text = temp_arr.pop(); // 删除数组最后以为，返回删除数据

        temp_arr.forEach(element => {
          let obj = {};
          let time_arr = element.substr(1, element.length - 1).split(":"); // 02:00.00 获取事件数据
          let s = parseInt(time_arr[0]) * 60 + Math.ceil(time_arr[1]); // 得到当前秒数
          obj.time = s;
          obj.text = text;
          if (text.length > 0) {
            this.lyric.push(obj); // 每一行处理好数据放入数组
          }
        });
      }
    },
    // 音乐播放结束
    endedFun() {
      this.iconplay = true;
      this.$refs.audio.play(); // 播放
      clearInterval(this.clearset); // 清除定时器
      if (this.playerType == 1) {
        // 列表播放
        this.lowerFun();
        this.iconplay = false;
      } else {
        // 随机播放
        let num = parseInt(Math.random() * this.musicData.tracks.length);
        let { tracks } = this.musicData;
        this.$set(this.musicData, "id", tracks[num].id);
        this.$set(this.musicData, "name", tracks[num].name);
        this.$set(this.musicData, "ar", tracks[num].ar);
      }
    },
    // 修改类型
    changeMode() {
      this.playerType = this.playerType == 1 ? 2 : 1;
    },
  },
  computed:{
    musicData(){
        return this.$store.state.musicData;
    }
  },
  created(){
      // 获取数据
      // window.addEventListener("setItem",()=>{
      //     this.musicData = this.resetSetItem.fetch();
      // })
  },
  filters: {
    playertime(data) {
      let m = parseInt(data / 60);
      let s = parseInt(data % 60);
      s = s < 10 ? "0" + s : s;
      if (m == 0 && s == 0) {
        return "0:00";
      } else {
        return m + ":" + s;
      }
    },
  },
  beforeDestroy() {
    // 销毁清除定时器
    clearInterval(this.clearset); // 清除定时器
  },
};
</script>

<style lang="less">
.showlist{
  .van-popup{
    max-height: 50%;
  }
  ul{
    // padding-top: 30px;
    margin: 17px;
    li{
      height: 36px;
      line-height: 36px;
      font-size: 14px;
      span{
        &.name{
          display: inline-block;
          width: 200px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
      &.btn{
        position: fixed;
        left: 0px;
        right: 0px;
        bottom: 4px;
        button{
          width: 100%;
          border: none;
        }
      }
    }
  }
}

.player {
  z-index: 999;
  overflow: hidden;
  position: fixed;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
  // width: 375px;
  height: 100%;
  margin: auto;
  background: #837f7d;
  z-index: 500;
  .button {
    position: absolute;
    top: 23px;
    left: 23px;
    font-size: 34px;
    width: 34px;
    height: 34px;
    span {
      display: block;
      font-size: 34px;
      height: 34px;
      line-height: 34px;
      color: #fff;
      font-weight: bold;
    }
  }
  .title {
    width: 260px;
    margin: auto;
    text-align: center;
    color: #fff;
    h2 {
      font-size: 18px;
      margin-top: 10px;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
    }
    h3 {
      font-size: 16px;
    }
  }
  .content {
    height: 446px;
    text-align: center;
    .img {
      float: left;
      width: 100%;
      margin-top: 86px;
      img {
        display: block;
        width: 268px;
        height: 268px;
        border: 24px solid #878381;
        border-radius: 50%;
        background: #fff;
        margin: 0 auto;
      }
      &.play {
        animation: rotate 20s linear infinite;
      }
      &.pause {
        animation-play-state: paused;
      }
    }
    .lyrics{
        width: 100%;
        height: 466px;
        position: relative;
        overflow: hidden;
        ul{
            position: absolute;
            width: 100%;
            min-height: 1000px;
            top:300px;
            left:0px;
            li{
                width: 90%;
                margin: auto;
                color:#4F4B49;
                text-align: center;
                height: 50px;
                line-height: 50px;
                font-size:18px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                &.con{
                    color:#fff;
                    font-size:22px;
                }
            }
        }
    }
  }
  .range {
    text-align: center;
    .bar {
      width: 220px;
      margin: 0 auto;
      position: relative;
      font-size: 18px;
      color: #fff;
      .timeLeft {
        position: absolute;
        left: -44px;
        top: -7px;
      }
      .timeRight {
        position: absolute;
        right: -44px;
        top: -7px;
      }
    }
  }
  .buttons {
    display: flex;
    margin-top: 33px;
    .iconfont {
      flex: 1;
      text-align: center;
      font-size: 34px;
      color: #fff;
      height: 66px;
      line-height: 66px;
    }
    .iconbutton {
      flex: 1;
      text-align: center;
      color: #fff;
      height: 66px;
      .iconfont {
        display: block;
        border: 5px solid #fff;
        font-size: 20px;
        height: 55px;
        width: 55px;
        line-height: 55px;
        margin: 0 auto;
        border-radius: 50%;
      }
    }
  }
}

.mini-player {
  position: fixed;
  left: 0px;
  bottom: 0px;
  width: 100%;
  padding: 10px 17px;
  background: rgba(255, 255, 255, 0.9);
  // background: rgba(217, 217, 217, 0.8);
  display: flex;
  .img {
    flex: 0 0 50px;
    img {
      width: 38px;
      height: 38px;
      // margin: 13px 0 0 30px;
      border-radius: 50%;
      &.play {
        animation: rotate 20s linear infinite;
      }
      &.pause {
        animation-play-state: paused;
      }
    }
  }
  .text {
    flex: 1;
    h2 {
      margin-top: 5px;
      font-size: 14px;
      color: #3a3c3e;
      width: 180px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    h3 {
      font-size: 12px;
      color: #3a3c3e;
      width: 180px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
  }
  .control {
    flex: 0 0 100px;
    // line-height: 55px;
    margin-top: 10px;
    .left{
      float: left;
      margin-right: 20px;
      span {
        display: block;
        font-size: 30px;
        width: 25px;
        height: 25px;
        line-height: 25px;
        text-align: center;
        color: #646465;
        border-radius: 50%;
      }
    }
    .right{
      float: left;
      margin-right: 10px;
      span {
        display: block;
        font-size: 20px;
        width: 25px;
        height: 25px;
        line-height: 25px;
        text-align: center;
        color: #646465;
        border-radius: 50%;
      }
    }
    
  }
}

@keyframes rotate {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}

.custom-button {
  width: 5px;
  height: 5px;
  color: #fff;
  font-size: 10px;
  line-height: 18px;
  text-align: center;
  background: #ee0a24;
  border-radius: 50%;
  border: 6px solid #fff;
}
</style>
